<script setup>
const showType = ref('list')

// const arr = ref([
//     { id: 1, name: 'Charles Dickens', img: 'assets/img/students/student-01.jpg', type: 'Student' },
//     { id: 2, name: 'Gabriel Palmer', img: 'assets/img/user/user2.jpg', type: 'Student' },
//     { id: 3, name: 'Charles Dickens', img: 'assets/img/students/student-01.jpg', type: 'Student' },
//     { id: 4, name: 'as', img: 'assets/img/students/student-01.jpg', type: 'Student' },
//     { id: 5, name: 'bx', img: 'assets/img/students/student-01.jpg', type: 'Student' },
//     { id: 6, name: 'Charles x', img: 'assets/img/students/student-01.jpg', type: 'Student' },
// ])

defineProps({
    list: {
        type: Array,
        default: () => []
    },
    total: { type: Number, default: 0 },
    params: {
        type: Object,
        default: () => {
            return {
                pageIndex: 1,
                pageSize: 10
            }
        }
    },
    showType: {
        type: String,
        default: 'list'
    },
    to: {
        type: String,
        default: '#'
    }
})

</script>
<template>
    <div :class="showType + '-view'">
        <div class="showing-list">
            <div class="row">
                <div class="col-lg-6">
                    <div class="d-flex align-items-center">
                        <div class="view-icons">
                            <a @click.prevent="showType = 'grid'" href="javascript:void(0);" class="grid-view"
                                :class="{ 'active': showType == 'grid' }"><i class="feather-grid"></i></a>
                            <a @click.prevent="showType = 'list'" href="students-list.html" class="list-view"
                                :class="{ 'active': showType == 'list' }"><i class="feather-list"></i></a>
                        </div>
                        <div class="show-result">
                            <h4>显示 {{ total }} 中的 {{ 1 + (params.pageIndex - 1) * params.pageSize }} ~ {{
                                (params.pageIndex - 1) * params.pageSize + list.length }} </h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div v-for="item in list" :key="item.id" :class="{ 'col-lg-3': showType == 'grid' }"
                class="col-md-6 d-flex">
                <div class="box flex-fill">
                    <div class="box-img">
                        <NuxtLink :to="to + `?id=${item.id}`">
                            <img class="img-fluid" alt="" src="assets/img/students/student-01.jpg">
                        </NuxtLink>

                    </div>
                    <div class="box-content pb-0">
                        <h5>
                            <NuxtLink :to="to + `?id=${item.id}`">
                                {{ item.name }}
                            </NuxtLink>

                        </h5>
                        <h6>Student</h6>
                        <div class="loc-blk d-flex align-items-center info">
                            <img src="assets/img/students/loc-icon.svg" class="me-1" alt="">
                            <p>Iceland</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<style scoped>
.list-view .box {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
}

.list-view .box-img img {
    max-width: 100%;
    border-radius: 7px;
    width: 100%;
}

.list-view .box-content {
    position: relative;
    width: 100%;
    text-align: left;
    padding: 0 0 0 25px;
}

.list-view .box-content .info {
    justify-content: flex-start;
}

.list-view .box-content .info p {
    margin-bottom: 0px;
}

.list-view .box-content h6 {
    font-size: 14px;
    color: #685F78;
    margin-bottom: 15px;
}

.list-view .box-content p {
    color: #685F78;
    margin-bottom: 0px;
}

.grid-view .box {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
}

.grid-view .box-img {
    position: relative;
    text-align: center;
}

.grid-view .box-img img {
    max-width: 200px;
    width: 100%;
    border-radius: 50%;
}

.grid-view .box-content {
    padding: 15px 0px;
    text-align: center;
}

.grid-view .box-content .info {
    justify-content: center;
}

.box-content h6 {
    font-size: 14px;
    color: #685F78;
    margin-bottom: 15px;
}

.box-content p {
    color: #685F78;
    margin-bottom: 0px;
}
</style>
